<template>
  <div class="news-container">
    <!-- 顶部新闻区域 -->
    <div class="news-header">
      <div class="tiem">
        <img
          :src="
            firstNews.images.length > 0
              ? firstNews.images[0]
              : require('../../assets/img/PopularRecommendations.png')
          "
        />
        <img src="" alt="" />
        <div class="tiem-tex">{{ firstNews.title }}</div>
      </div>

      <div class="tiem">
        <img
           :src="
             firstNews.images.length > 0
              ? secondNews.images[0]
              : require('../../assets/img/PopularRecommendations.png')
          "
        />
        <div class="tiem-tex">{{ secondNews.title }}</div>
      </div>
    </div>

    <!-- 新闻列表区域 -->
    <ul class="news-list">
      <li v-for="(item, index) in newsList" :key="index">
        <!-- <span class="item-type"></span> -->
        <i class="iconfont icon-tushuqikan item-icon"></i>
        <span class="item-title" :title="item.Content">{{ item.Content }}</span>
        <span class="item-date">{{ item.createTime }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import service from "@/service/service";

export default {
  data() {
    return {
      newsList: [],
      firstNews: {
         images: []
      },
      secondNews: {
         images: []
      },
    };
  },
  methods: {
    //   /frontend/index/peronalRecmd/{size}
    //  个性化推荐
    async getPersonalizedRecommendation() {
      try {
        const response = await service({
          url: `/frontend/index/peronalRecmd/9`,
          method: "get",
        });
        if (response.code === 200) {
          const formattedData = response.data
            ? response.data.map((item) => {
                return {
                  ...item,
               Content: `[${item.resourceTag?.tagName || ''}${item.resourceTag?.tagName && item.type?.typeName ? ' | ' : ''}${item.type?.typeName || ''}] ${item.title}`


                };
              })
            : [];
          if (formattedData.length > 0) {
            this.firstNews = formattedData[0] || {};
            this.secondNews = formattedData[1] || {};
            this.newsList = formattedData.slice(2, 7);
          }
        } else {
          this.$message.error(response.msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
  mounted() {
    this.getPersonalizedRecommendation();
  },
};
</script>

<style lang="scss" scoped>
.tiem {
  width: 320px;
  height: 194px;
  position: relative;
  overflow: hidden;
}

.tiem-tex {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 25px;
  height: 40px;
  // background: #327dff;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 0 4px 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-container {
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
}

.news-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }
}

.news-list {
  list-style: none;
  padding: 0;

  li {
    padding: 12px 0;
    // border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;

    .item-icon {
      font-size: 20px;
      color: #9999;
      margin-right: 5px;
    }

    .item-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #333333;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        color: #327dff;
      }
    }

    .item-date {
      margin-left: 67px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
    }
  }
}
</style>